<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课堂助手</title>
    <script>
        function isMobile() {
            var _ua = window.navigator.userAgent,
                _isMobile = /(mobile|mobi|wap|iphone)/i.test(_ua),
                _isAndroid = /android/i.test(_ua),
                _isIpad = /(ipad)/i.test(_ua);
            if (_isMobile || _isAndroid || _isIpad) {
                return true;
            } else {
                return false;
            }
        }
        function getCookie(name) {
            var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
            if (arr = document.cookie.match(reg))
                return unescape(arr[2]);
            else
                return null;
        }

    </script>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <link rel="stylesheet" href="css/reset.css">
    <link rel='stylesheet' href='css/m-index.css'>
    <link rel="stylesheet" href="css/m-question.css">
    <link rel="stylesheet" href="css/perinfo_phone.css">
    <link rel="stylesheet" href="css/toast.css">
</head>
<body>
<div style="position: fixed;top: 0;left: 50%;background-color: rgba(50,50,50,.65);z-index: 999;transform: translateX(-50%)">
    <p>测试通常需要两台计算机(或不同浏览器)</p>
    <p>请先选择课堂</p>
</div>
<header id="header">
    <h1>CLASSROOM ASSISTANT</h1>
    <div class="self-info">
        <img src="image/portrait_tch.png" class="portrait">
        <span class="type">Stu</span>
        <span class="name" id="name">戴红军</span>
        <ul class="hover-box">
            <li>
                <a href="javascript:void(0)" onclick="changePage(3)">
                    <img src="image/self.png">
                    <span>个人信息</span>
                </a>
            </li>
            <li>
                <a href="javascript:void (0)" id="logout"><img src="image/logout.png">
                    <span>注销账号</span></a>
            </li>
        </ul>
    </div>
</header>
<nav id="nav">
    <div class="nav__item active" onclick="changePage(1)">课堂 介绍 讨论</div>
    <div class="nav__item" onclick="changePage(2)">公告 问题 资料</div>
</nav>
<section class="main" id="main">
    <div class="page-1" id="page-1">
        <div class="block course-list hidden" id="course-list">
            <div class="block__title">
                <div>所有课堂 <span id="all-courses-sum">102</span></div>
                <div>我的课堂 <span id="my-courses-sum">11</span></div>
            </div>
            <div class="block__content">
                <ul class="all-courses" id="all-courses"></ul>
                <ul class="my-courses" id="my-courses"></ul>
            </div>
        </div>
        <div class="block course-info hidden" id="course-info">
            <div class="block__title">
                <div>课堂 <span id="now-course">aaaa</span></div>
                <div class="switcher on">
                    状态
                    <div class="switcher__on">上课中</div>
                    <div class="switcher__off">已下课</div>
                </div>
            </div>
            <div class="block__content">
                <div class="course-introduce">
                    <h1>课程介绍</h1>
                    <p id="course-introduce-content">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                </div>
                <div class="button-group">
                    <!--<div class="button disabled">已进入课堂</div>-->
                    <div class="button" id="check-in">签到</div>
                </div>
            </div>
        </div>
        <div class="block chat-area">
            <div class="block__title">讨论区</div>
            <div class="block__content">
                <div class="message-block" id="message-block"></div>
                <div class="pre-sending-area">
                    <input type="text" id="pre-sending-area__text">
                    <div class="button send" id="pre-sending-area__button">发送</div>
                </div>
            </div>
        </div>
    </div>
    <div id="perinfo_out" style="display: none">
        <div id="perinfo_middle">
            <div id="perinfo_in_up">
                <div id="perinfo_little_name" class="perInfo_little_div">
                    真实姓名：<input type="text" class="perInfo_input" id="perInfo_input_name" value="戴红军"><span id="perInfo_name"></span>
                    <img src="image/perInfoPenlogo.png" onclick="chageName()" class="penLogo">
                </div>

                <div id="perinfo_little_position" class="perInfo_little_div">
                    <span class="twoletter">身</span>份：<span id="perInfo_position"></span>
                </div>

                <div id="perinfo_little_Id" class="perInfo_little_div">
                    <span class="twoletter">账</span>号：<span id="perInfo_ID"></span>
                </div>

                <div id="perinfo_little_password" class="perInfo_little_div">
                    <span class="twoletter">密</span>码：<input type="password" id="perInfo_password" class="perInfo_input">
                    <img src="image/perInfoPenlogo.png" onclick="changePassword()" class="penLogo">
                </div>

                <div id="perinfo_little_passwordIdentify" class="perInfo_little_div" style="display: none">
                    确认密码：<input type="password" id="perInfo_passwordIdentify" class="perInfo_input">
                </div>
            </div>
            <div id="perinfo_in_bottom">
                <div class="perInfo_image_1">
                    <div class="perInfo_image_2" style="color: #f97e99">
                        <img id="back_img" class="perInfo_logo" src="image/back.png"  onclick="back()">
                        <br>
                        返回首页
                    </div>
                </div>
                <div class="perInfo_image_1">
                    <div class="perInfo_image_2" style="color: #5ccbbb">
                        <img id="right_img" class="perInfo_logo" src="image/right_perInfo.png" onclick=submitPerInfo()>
                        <br>
                        提交修改
                    </div>
                </div>
            </div>
        </div>
    </div>

</section>
<section id="main2" style="display: none">
    <div class="wrap">
        <section>
            <div class="nav-line" onclick="show('bulletin')">
                公告栏
                <img src="image/down-arrow.png" alt="下拉">
            </div>
            <div id="bulletin" class="open">
                <div class="content">
                    <div class="content-time">2017-08-08</div>
                    <div class="content-inner">公告公告公告公告这里是公告 这里是公告公告公告公告公告这里是公告 这里是公告</div>
                </div>
                <div class="content">
                    <div class="content-time">2017-08-08</div>
                    <div class="content-inner">公告公告公告公告这里是公告 这里是公告公告公告公告公告这里是公告 这里是公告</div>
                </div>
                <div class="content">
                    <div class="content-time">2017-08-08</div>
                    <div class="content-inner">公告公告公告公告这里是公告 这里是公告公告公告公告公告这里是公告 这里是公告</div>
                </div>
                <div class="content">
                    <div class="content-time">2017-08-08</div>
                    <div class="content-inner">公告公告公告公告这里是公告 这里是公告公告公告公告公告这里是公告 这里是公告</div>
                </div>
                <div class="content">
                    <div class="content-time">2017-08-08</div>
                    <div class="content-inner">公告公告公告公告这里是公告 这里是公告公告公告公告公告这里是公告 这里是公告</div>
                </div>
                <div class="content">
                    <div class="content-time">2017-08-08</div>
                    <div class="content-inner">公告公告公告公告这里是公告 这里是公告公告公告公告公告这里是公告 这里是公告</div>
                </div>
                <div class="content">
                    <div class="content-time">2017-08-08</div>
                    <div class="content-inner">公告公告公告公告这里是公告 这里是公告公告公告公告公告这里是公告 这里是公告</div>
                </div>
            </div>
        </section>
        <section>
            <div class="nav-line " onclick="show('resource')">
                资料库
                <img src="image/down-arrow.png" alt="下拉">
            </div>
            <div id="resource" class="close">
                <div class="content flex-content">
                    <div class="content-name">js权威指南</div>
                    <div class="content-small">134M</div>
                    <img class="content-img" src="image/download.png" alt="下载">
                </div>
                <div class="content flex-content">
                    <div class="content-name">js权威指南</div>
                    <div class="content-small">134M</div>
                    <img class="content-img" src="image/download.png" alt="下载">
                </div>
                <div class="content flex-content">
                    <div class="content-name">js权威指南</div>
                    <div class="content-small">134M</div>
                    <img class="content-img" src="image/download.png" alt="下载">
                </div>
                <div class="content flex-content">
                    <div class="content-name">js权威指南</div>
                    <div class="content-small">134M</div>
                    <img class="content-img" src="image/download.png" alt="下载">
                </div>

            </div>
        </section>
        <section>
            <div class="nav-line " onclick="show('question')">
                课堂问题
                <img src="image/down-arrow.png" alt="下拉">
            </div>
            <div id="question" class="close">
                <div class="content">
                    <div class="content-head">Q5:英文中有多少个英文字母?</div>
                    <div class="upload">
                        <div class="content-input"><input type="text" placeholder="请输入答案"></div>
                        <img src="image/upload.png" alt="提交答案">
                    </div>
                </div>
                <div class="content">
                    <div class="content-head">Q5:英文中有多少个英文字母?</div>
                    <div class="content-inner">我的答案：<span class="content-answer">26</span></div>
                </div>
                <div class="content">
                    <div class="content-head">Q5:英文中有多少个英文字母?</div>
                    <div class="content-inner">我的答案：<span class="content-answer">26</span></div>
                </div>
                <div class="content">
                    <div class="content-head">Q5:英文中有多少个英文字母?</div>
                    <div class="content-inner">我的答案：<span class="content-answer">26</span></div>
                </div>
            </div>
        </section>

    </div>
</section>
</body>
<script>
    var h = document.getElementsByClassName('nav-line')[0].offsetHeight;
    document.getElementById('main2').style.display = 'none';
    var header_h = document.getElementById('header').offsetHeight;
    var nav_h = document.getElementById('nav').offsetHeight;
    var s_h = window.innerHeight - header_h - nav_h - h*3;
    var isMoving = false;
    var state_name = 0;
    var state_password=0;
    document.getElementsByClassName('open')[0].style.height = s_h+'px';
    function show(a) {
        var div =  document.getElementById(a);
        if(isMoving==false){
            if (div.className=='open'){
//                isMoving=true;
//                div.style.height = '0px';
//                setTimeout(function () {
//                    div.className = 'close';
//                    isMoving = false;
//                },1000);
            }else{
                var open = document.getElementsByClassName('open')[0];
                open.style.height = '0px';
//                open.className = 'close';
                div.className = 'open';
                div.style.height = s_h+'px';
                isMoving = true;
                setTimeout(function () {
//                    console.log();
                    open.className = 'close';
                    isMoving = false;
                },1000);
            }
        }


    }

    function changePage(ind) {
        var page1 = document.getElementById('page-1'),
            page2 = document.getElementById('main2'),
            page3 = document.getElementById('perinfo_out');
        page1.style.display = 'none';
        page2.style.display = 'none';
        page3.style.display = 'none';
        if (ind === 1){
            page1.style.display = '';
        }else if (ind === 2){
            page2.style.display = '';
        }else if (ind === 3){
            page3.style.display = '';
        }


    }



    function chageName() {
        if (state_name == 0) {
            document.getElementById("perInfo_input_name").style.display = "inline-block";
            document.getElementById("perInfo_name").style.display = "none"
            state_name = 1;
        }
        else if (state_name == 1) {
            document.getElementById("perInfo_input_name").style.display = "none";
            document.getElementById("perInfo_name").style.display = "inline-block"
            state_name = 0
        }
    }
    function changePassword() {
        if (state_password == 0) {
            document.getElementById("perInfo_password").style.display = "inline-block";
            document.getElementById("perInfo_passwordIdentify").style.display = "inline-block"
            document.getElementById("perinfo_little_passwordIdentify").style.display = "block"
            state_password = 1
        }
        else if (state_password == 1) {
            document.getElementById("perInfo_password").style.display = "none";
            document.getElementById("perInfo_passwordIdentify").style.display = "none"
            document.getElementById("perinfo_little_passwordIdentify").style.display = "none"
            state_password = 0
        }

    }
    document.getElementById("perInfo_name").innerHTML = getCookie('name')
    document.getElementById("perInfo_input_name").value = getCookie('name')
    document.getElementById("perInfo_position").innerHTML = getCookie('type')
    document.getElementById('perInfo_ID').innerHTML = getCookie('username')
//    //    点击发送 发送数据
    function submitPerInfo() {
//        alert("123131")
        var name = document.getElementById("perInfo_input_name").value,
            password = document.getElementById("perInfo_password").value,
            password_iden = document.getElementById("perInfo_passwordIdentify").value;
        if (password != password_iden) {
            alert("两次输入密码不同，请重新输入");
            document.getElementById("perInfo_password").value = "";
            document.getElementById("perInfo_passwordIdentify").value = "";
            return;
        }
        if (name == "" && password == "" && password_iden == "") {
            alert("您没有填写任何信息");
            return;
        }
        $.ajax({
            url: "https://guozhuoqiang.top:8443/mrcourse/common/user",
            type: "POST",
            dataType: "json",
            data: {
                "name": name,
                "password": password
            },
            success: function () {
                alert("信息修改成功")
            }
        })}
    function back() {
        window.location.pathname = "/mrcourse/index.html";
    }






//    点击提交修改发送个人信息到后台


</script>
<script src="script/require.js" data-main="script/m-index-main"></script>
</html>